<template>
  <div style="width: 500px; margin:0px auto;">
    <!-- Form.vue -->
    <h2>填写个人信息</h2>
    <hr>
    用户账号：<input type="text" v-model="form.name">
    <hr>
    用户密码：<input type="password" v-model="form.pwd">
    <hr>
    手机号码：<input type="text" v-model="form.phone">
    <br>
    <span v-show="showPhoneErr" style="color:red;">格式有误（11位手机号码格式）</span>
    <hr>
    证件类型：
    <input type="radio" value="sfz" v-model="form.zj"> 身份证
    <input type="radio" value="jgz" v-model="form.zj"> 军官证
    <input type="radio" value="sbk" v-model="form.zj"> 社保卡
    <input type="radio" value="jz" v-model="form.zj"> 驾照
    <hr> 
    证件号码：<input type="text" v-model="form.idcard">
    <hr>
    选择感兴趣的行业：
    <input type="checkbox" value="jy" v-model="form.hy"> 教育
    <input type="checkbox" value="jr" v-model="form.hy"> 金融
    <input type="checkbox" value="yl" v-model="form.hy"> 医疗
    <input type="checkbox" value="zmt" v-model="form.hy"> 自媒体
    <hr>
    选择籍贯：
    <select v-model="form.jg">
        <option value="hb">河北省</option>
        <option value="hn">河南省</option>
        <option value="sd">山东省</option>
        <option value="sx">山西省</option>
    </select>
    <hr>
    <button @click="submit">立即注册</button> 
    &nbsp;&nbsp;
    <button @click="form={}">重置表单</button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            showPhoneErr: false,  // 是否显示电话号码的错误消息
            form: {
                name: '',  // 双向绑定账号
                pwd: '',   // 双向绑定密码
                phone:'',  // 绑定手机号
                zj:'', // 绑定单选按钮的证件类型 
                idcard: '', // 绑定身份证号
                hy: [],   // 绑定行业
                jg: 'sd'
            },
        }
    },
    methods: {
        submit() {
            console.log(this.form)
        }
    },
    watch: {
        'form.phone': function(newValue, oldValue){
            // 通过正则表达式验证 newValue是否符合手机格式
            let reg = /^1[3-9]\d{9}$/;
            console.log(this)
            if(reg.test(newValue)){  // 验证通过
                console.log('通过！')
                this.showPhoneErr = false
            }else {  // 验证失败
                console.warn('失败！')
                this.showPhoneErr = true
            }
        }
    },
};
</script>

<style lang="scss" scoped></style>
